<template>
  <div id="detail">
    <HeaderBar class="detail-header">
      <div slot="detail-header">
        头条详情
        <Icon
          style="float:left"
          type="ios-arrow-back"
          size="28"
          color="#000"
          class="fl back"
          @click.native="goBack"
        ></Icon>
        <Icon
          style="float:right"
          type="ios-share-alt"
          size="28"
          color="#000"
          class="fr share"
          @click.native="showSharebox"
        ></Icon>
      </div>
    </HeaderBar>
    <div class="container">
      <h2 class="detail-title">{{$route.params.title}}</h2>
      <div class="media_name">
        <img src="../assets/imgs/head.jpg" height="360" width="360" alt class="avatar_url" />
        <span class="name">{{media_name}}</span>
        <br />
        <span class="date">{{datetime}}</span>
      </div>
      <div class="contentNews">
        {{abstract}}
        <img :src="img.url" alt v-for="(img,index) in image_list" :key="index" />
      </div>
      <hr />
      <div class="zan">
        <i-button
          class="button"
          ghost
          size="large"
          icon="ios-thumbs-up"
          shape="circle"
          :class="{'changeStyle':isShow}"
          @click="rep()"
        >{{this.$route.params.repin_count}}</i-button>
        <i-button
          @click="dislike()"
          class="button"
          ghost
          size="large"
          icon="ios-trash"
          shape="circle"
        >不喜欢</i-button>
      </div>
      <hr />
    </div>
    <div class="replyContent">评论区：</div>
    <div style="width: 100%;
    margin: 0 auto;">
      <Card :bordered="false" v-for="(item,index) in replys" :key="index">
        <p slot="title">用户名：{{item.username}}</p>
        <p>发表内容：{{item.content}}</p>
      </Card>
    </div>
    <Comment :comment="comment_count" @getKeyVal="getVal" style="float:left"></Comment>
    <shareBox :show="Sharebox"></shareBox>
  </div>
</template>
<script>
import HeaderBar from "../components/HeaderBar.vue";
import ShareBox from "../components/Share.vue";
import Comment from "../components/Comment.vue";
import * as type from "../store/mutation-types.js";
import { mapGetters } from "vuex";
export default {
  components: {
    HeaderBar,
    ShareBox,
    Comment
  },
  data() {
    return {
      replys: [],
      media_info: this.$route.params.media_info,
      title: this.$route.params.title,
      isShow: false,
      replyVal: "",
      username: ""
    };
  },
  created(){
    this.replys.forEah(item =>{
        console.log(item)
      })
  },
  methods: {
    rep() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.$route.params.repin_count++;
        document.getElementsByClassName("button")[0].style.color = "#57a3f3";
      } else {
        document.getElementsByClassName("button")[0].style.color = "#495060";
      }
    },
    dislike() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        document.getElementsByClassName("button")[1].style.color = "#57a3f3";
      } else {
        document.getElementsByClassName("button")[1].style.color = "#495060";
      }
    },
    showSharebox() {
      this.$store.commit(type.SHOWSHAREBOX, !this.Sharebox);
    },
    goBack() {
      this.$store.commit(type.ROUTERCHANGE, !this.routerChange);
      this.$router.go(-1);
    },
    //msg就是传过来的数据了  这只是个形参  名字可以随意
    getVal(msg) {
      this.replys = msg; //然后将数据赋值给replyVal
      console.log(msg);
    }
  },
  computed: {
    ...mapGetters(["oneDetail", "Sharebox", "routerChange"]),
    // avatar_url:function(){
    //     if(this.media_info.avatar_url){
    //         return this.media_info.avatar_url
    //     }else{
    //         return ''
    //     }
    // },
    media_name: function() {
      if (this.$route.params.media_name) {
        return this.$route.params.media_name;
      } else {
        return "";
      }
    },
    datetime: function() {
      if (this.$route.params.datetime) {
        return this.$route.params.datetime;
      } else {
        return "";
      }
    },
    abstract: function() {
      if (this.$route.params.abstract) {
        return this.$route.params.abstract;
      } else {
        return "";
      }
    },
    image_list: function() {
      if (this.$route.params.image_list) {
        return this.$route.params.image_list;
      } else {
        return "";
      }
    },
    keywords() {
      if (this.$route.params.keywords) {
        return this.$route.params.keywords;
      } else {
        return "";
      }
    },
    comment_count: function() {
      if (this.$route.params.comment_count) {
        return this.$route.params.comment_count;
      } else {
        return "";
      }
    }
  },
  watch: {
    $route: function() {
      this.$store.commit(type.SHOWSHAREBOX, false);
    }
  }
};
</script>
<style lang="scss">
@import "../assets/css/border.scss";
#detail {
  hr {
    height: 1px;
    background: #ccc;
  }
  .detail-header {
    background: #fff;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    &::after {
      content: "";
      box-sizing: border-box;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      border-top: 1px solid #ccc;
      @media screen and (-webkit-min-device-pixel-ratio: 3) {
        transform: scaleY(0.33333);
      }
      @media screen and (-webkit-min-device-pixel-ratio: 2) {
        transform: scaleY(0.5);
      }
    }
    .back {
      line-height: 1.2rem;
      margin-left: 0.3rem;
    }
    .share {
      line-height: 1.2rem;
      margin-right: 0.3rem;
    }
  }
  .container {
    margin: 1.6rem auto 0rem;
    width: 94%;
    .detail-title {
      color: #000;
      font-size: 25px;
    }
    .media_name {
      position: relative;
      margin-top: 0.5rem;
      .avatar_url {
        height: 1.1rem;
        width: 1.1rem;
        border-radius: 50%;
      }
      .name {
        position: absolute;
        font-size: 25px;
        font-weight: bold;
        left: 1.3rem;
        top: 0.1rem;
      }
      .date {
        position: absolute;
        left: 1.3rem;
        top: 0.6rem;
      }
    }
    .contentNews {
      margin-top: 0.5rem;
      font-size: 20px;
      color: #000;
      text-indent: 0.7rem;
      line-height: 0.8rem;
      img {
        text-align: center;
        display: block;
        width: 70%;
        margin: 0.2rem auto;
      }
    }
    .keywords {
      margin-top: 0.5rem;
      line-height: 0.8rem;
      span {
        margin-bottom: 0.3rem;
        text-align: center;
        margin-right: 0.3rem;
        display: inline-block;
        border: 1px solid #ccc;
        padding: 0 0.2rem;
        border-radius: 0.4rem;
      }
    }
    .zan {
      >>> .changeStyle {
        color: red;
      }
      text-align: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      .button {
        color: #495060;
        border: solid 1px #dddee1;
      }
    }
    .zan :hover {
      color: #57a3f3;
      border-color: #57a3f3;
    }
  }
  .replyContent {
    margin-top: 20px;
    margin-left: 20px;
  }
  .ivu-card {
    margin-bottom: 20px;
    border: solid 2px #cccccc;
    width: 94%;
    margin-left: 20px;
  }
}
</style>
